<style lang="less" scoped>
.index {
  background: #f8f8f9;
}
.loading {
  animation: myloading 1s linear infinite;
  margin-top: 100px;
}
@keyframes myloading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.add-work-icon{
  width: 24px;
  height: 24px;
}
.question_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}

.ques_content {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.xuanxiang {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.card_row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.edit_out {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
}
.left {
  text-align: left;
}
.card{
  box-shadow: 0 0 4px 0 rgb(194, 192, 192),0 0 8px 0 rgb(194, 192, 192);
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 999;
}
</style>

<template>
  <div id="index">
    <div class="header">
      <myheader></myheader>
    </div>
    <Layout style="margin-top: 60px" id="content">
      <Layout :style="{padding: '0px 24px 24px','background-color':'#fff','min-width': '1210px'}">
        <div style="padding: 15px 30px">
          <my-breadcrumb :prop="breadcrumbList"></my-breadcrumb>
        </div>
        <div class="question_list">
          <div v-if="questions.length === 0 && attachedQuestion.length === 0">没有题目～</div>
          <div v-for="(ques,index) in attachedQuestion" class="card_row">
            <Card class="card" style="width:900px;margin-bottom: 20px">
              <div class="ques_content">
                <div class="left" v-html="ques.practice.question_editor_Content"></div>
                <Divider />
                <div v-if="ques.practice.type === 'panduan'">
                  答案：
                  <p v-if="ques.practice.answer === 'yes'">正确</p>
                  <p v-if="ques.practice.answer === 'no'">错误</p>
                </div>
                <div class="xuanxiang" v-if="ques.practice.type === 'xuanze'">
                  <div v-for="(item, index) in ques.practice.items">
                    <span v-if="index === 0">A</span>
                    <span v-if="index === 1">B</span>
                    <span v-if="index === 2">C</span>
                    <span v-if="index === 3">D</span>
                    <span v-if="index === 4">E</span>
                    <span v-if="index === 5">F</span>
                    <span v-if="index === 6">G</span>
                    <span v-if="index === 7">H</span>
                    <span v-if="index === 8">I</span>
                    <span v-if="index === 9">J</span>
                    <span>{{item}}</span>
                  </div>
                </div>
                <div v-if="ques.practice.type === 'xuanze'">
                  答案：
                  <p v-for="ans in ques.practice.answer">
                    <span v-if="ans === '1'">A</span>
                    <span v-if="ans === '2'">B</span>
                    <span v-if="ans === '3'">C</span>
                    <span v-if="ans === '4'">D</span>
                    <span v-if="ans === '5'">E</span>
                    <span v-if="ans === '6'">F</span>
                    <span v-if="ans === '7'">G</span>
                    <span v-if="ans === '8'">H</span>
                    <span v-if="ans === '9'">I</span>
                    <span v-if="ans === '10'">G</span>
                  </p>
                </div>
                <div v-if="ques.practice.type === 'jianda'">
                  答案：
                  <span>言之有理即可</span>
                </div>
                <Divider />
                <div class="left" v-if="ques.practice.illustrationContent !== ''">
                  答案解析：
                  <div class="left" v-html="ques.practice.illustrationContent"></div>
                </div>
              </div>
            </Card>
            <el-tooltip
              style="margin-left:10px"
              class="item"
              effect="dark"
              :content="JSON.parse(homeworkFlag)[0] ?'点击从作业编辑区移除':'点击加入作业编辑区'"
              placement="right-start"
            >
              <img 
                :src="`../../static/pic/claim-solid${JSON.parse(homeworkFlag)[0] ?'':'1'}.png`" 
                class="add-work-icon" alt="" 
                @click="addToWork(0, ques._id)"
              />
            </el-tooltip>
          </div>
          <div v-for="(ques,index) in questions" class="card_row">
            <Card class="card" style="width:900px;margin-bottom: 20px">
              <div class="ques_content">
                <div class="left" v-html="ques.question"></div>
                <Divider />
                <div v-if="ques.type === 'panduan'">
                  答案：
                  <p v-if="ques.answer[0] === 'yes'">正确</p>
                  <p v-if="ques.answer[0] === 'no'">错误</p>
                </div>
                <div class="xuanxiang" v-if="ques.type === 'xuanze'">
                  <div v-for="(item, index) in ques.items">
                    <span v-if="index === 0">A</span>
                    <span v-if="index === 1">B</span>
                    <span v-if="index === 2">C</span>
                    <span v-if="index === 3">D</span>
                    <span v-if="index === 4">E</span>
                    <span v-if="index === 5">F</span>
                    <span v-if="index === 6">G</span>
                    <span v-if="index === 7">H</span>
                    <span v-if="index === 8">I</span>
                    <span v-if="index === 9">J</span>
                    <span>{{item}}</span>
                  </div>
                </div>
                <div v-if="ques.type === 'xuanze'">
                  答案：
                  <p v-for="ans in ques.answer">
                    <span v-if="ans === '1'">A</span>
                    <span v-if="ans === '2'">B</span>
                    <span v-if="ans === '3'">C</span>
                    <span v-if="ans === '4'">D</span>
                    <span v-if="ans === '5'">E</span>
                    <span v-if="ans === '6'">F</span>
                    <span v-if="ans === '7'">G</span>
                    <span v-if="ans === '8'">H</span>
                    <span v-if="ans === '9'">I</span>
                    <span v-if="ans === '10'">G</span>
                  </p>
                </div>
                <div v-if="ques.type === 'jianda'">
                  答案：
                  <span>言之有理即可</span>
                </div>
                <Divider />
                <div class="left" v-if="ques.illustrationContent !== ''">
                  答案解析：
                  <div class="left" v-html="ques.illustrationContent"></div>
                </div>
              </div>
            </Card>
            <el-tooltip
              style="margin-left:10px"
              class="item"
              effect="dark"
              :content="JSON.parse(homeworkFlag)[ques._id] ?'点击从作业编辑区移除':'点击加入作业编辑区'"
              placement="right-start"
            >
              <img 
                :src="`../../static/pic/claim-solid${JSON.parse(homeworkFlag)[ques._id] ?'':'1'}.png`" 
                class="add-work-icon" alt="" 
                @click="addToWork(ques._id, ques.point_id)"
              />
            </el-tooltip>
          </div>
        </div>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import myBreadcrumb from "../components/myBreadcrumb.vue";
import header from "../components/header.vue";
import { getPointAllQuestion } from "../api/api";
export default {
  name: "questions",
  data: function() {
    return {
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto",
        overflow: "scroll"
      },
      menu: [],
      questions: [],
      attachedQuestion: [],
      section: "",
      userGroup: "",
      point: {},
      homeworkFlag: "",
      flaglist: {},
      homeworklist: [],
      breadcrumbList: []
    };
  },
  created() {
    this.point = JSON.parse(sessionStorage.getItem("quesPoint")).point;
    this.attachedQuestion.push(this.point);
    if (JSON.parse(sessionStorage.getItem("homeworklist")) != null) {
      this.homeworklist = JSON.parse(sessionStorage.getItem("homeworklist"));
    }
    let that = this;
    let m = this.homeworklist.findIndex(function(item) {
      return item.questionId === "" && item.pointId === that.point._id;
    });
    if (m !== -1) {
      this.flaglist[0] = true;
    } else {
      this.flaglist[0] = false;
    }
    this.homeworkFlag = JSON.stringify(this.flaglist);

    // 获取面包屑数组
    if (JSON.parse(sessionStorage.getItem("pathList")) != null) {
      let breadcrumbList = JSON.parse(sessionStorage.getItem("pathList"));
      this.breadcrumbList = [...breadcrumbList, {name: '题库'}]
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        let content_top = document.getElementById("content").offsetTop;
        this.bg.height = `${window.innerHeight - content_top}px`;
        this.bg.width = `${window.innerWidth}px`;
      })();
    };
    let content_top = document.getElementById("content").offsetTop;
    this.bg.height = `${window.innerHeight - content_top}px`;
    this.userGroup = JSON.parse(this.$store.state.user).userGroup;
    getPointAllQuestion({ pointId: this.point._id })
      .then(response => {
        if (response.state === true) {
          let that = this;
          this.questions = response.results;
          if (this.questions.length > 0) {
            this.flaglist = JSON.parse(this.homeworkFlag);
            for (let i = 0; i < this.questions.length; i++) {
              let m = this.homeworklist.findIndex(function(item) {
                return (
                  item.questionId === that.questions[i]._id &&
                  item.pointId === that.questions[i].point_id
                );
              });
              if (m !== -1) {
                this.flaglist[this.questions[i]._id] = true;
              } else {
                this.flaglist[this.questions[i]._id] = false;
              }
            }
            this.homeworkFlag = JSON.stringify(this.flaglist);
          }
          // this.attachedQuestion = response.result.attachedQuestion;
        } else {
          this.$Message.error(response.msg);
        }
      })
      .catch(error => {
        this.$Message.error(error.status);
      });
  },
  components: {
    myheader: header,
    'my-breadcrumb': myBreadcrumb
  },
  methods: {
    addToWork(key, pointid) {
      this.flaglist = JSON.parse(this.homeworkFlag);
      this.flaglist[key] = !this.flaglist[key];
      this.homeworkFlag = JSON.stringify(this.flaglist);
      let quesId = "";
      if (key !== 0) {
        quesId = key;
      }
      if (this.flaglist[key]) {
        this.homeworklist.push({
          questionId: quesId,
          pointId: pointid
        });
        this.$Message.success("添加成功！请到作业-发布作业中查看~")
      } else {
        let index = this.homeworklist.findIndex(function(item) {
          return item.questionId === quesId && item.pointId === pointid;
        });
        this.homeworklist.splice(index, 1);
        this.$Message.success("移除题目成功！")
      }
      sessionStorage.setItem("homeworklist", JSON.stringify(this.homeworklist));
    }
  }
};
</script>